<template>
  <div>
    <el-button type="primary" icon="el-icon-edit" @click="dialogue = true">添加</el-button>
    <el-dialog title="新增用户" :visible.sync="dialogue" width="35%">
      <el-form :model="form" ref="form" label-width="100px" :rules="rules">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" autocomplete="off" style="width: 300px" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" autocomplete="off" style="width: 300px" type="password"
            placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" style="width: 300px" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="QQ 邮箱" prop="qqEmail">
          <el-input v-model="form.qqEmail" autocomplete="off" style="width: 300px" placeholder="请输入 QQ 邮箱"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogue = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addUser } from '@/api/auth/user'
import { validEmail, validPhone, validPassword } from '@/utils/validate'

export default {
  name: 'AddButton',
  inject: ["getDataList"],
  data() {
    const validateNickname = (rule, value, callback) => {
      if (value.length > 15) {
        callback(new Error('昵称长度不能大于15位'))
      } else {
        callback()
      }
    }
    const validatePhone = (rule, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!validPassword(value)) {
        callback(new Error('密码限制为6~18个字符，至少包含1个字母、1个数字、1个特殊字符'))
      } else {
        callback()
      }
    }
    const validateEmail = (rule, value, callback) => {
      if (!validEmail(value) && value !== '') {
        callback(new Error('邮箱格式不正确'))
      } else {
        callback()
      }
    }
    return {
      dialogue: false,
      form: {
        nickname: '',
        password: '',
        phone: '',
        qqEmail: '',
        sex: '男'
      },
      rules: {
        nickname: [{ required: false, trigger: 'blur', validator: validateNickname }],
        phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        qqEmail: [{ required: false, trigger: 'blur', validator: validateEmail }]
      }
    }
  },
  methods: {
    add() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let data = {
            "imgUrl": this.form.imgUrl,
            "nickname": this.form.nickname ? this.form.nickname : null,
            "password": this.form.password,
            "phone": this.form.phone,
            "qqEmail": this.form.qqEmail === '' ? undefined : this.form.qqEmail,
            "sex": this.form.sex === '男' ? 1 : 0
          }
          console.log(data)
          addUser(data).then(res => {
            if (res.data.code === 200) {
              this.$message.success({
                message: res.data.message,
                duration: 1000
              })
              this.getDataList()
              this.dialogue = false
              this.clear()
            } else {
              // this.$message.error({
              //   message: res.data.message,
              //   duration: 1000
              // })
            }
          })
        } else {
          return false
        }
      })
    },
    clear() {
      this.form = {
        nickname: '',
        password: '',
        phone: '',
        qqEmail: '',
        sex: '男'
      }
    }
  }
}
</script>

<style scoped></style>
